<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">Quá trình làm việc</div>
		</header>
		<div class="ditem">
		    <div class="title">Loại công việc</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="Vui lòng chọn công việc của bạn" readonly @click="openPicker('job_type')" v-model="data.job_type" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">Thời gian làm việc</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="Vui lòng chọn giờ làm việc của bạn." readonly @click="openPicker('working_years')" v-model="data.working_years" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">Đầu tư hàng tháng</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="Thu nhập cá nhân hàng tháng" readonly @click="openPicker('personal')" v-model="data.personal" />
		    </div>
		</div>
		<div class="ditem">
		    <div class="title">Gia đình ở lại hàng tháng</div>
		    <div class="pd">
		        <input type="text" class="input" placeholder="Thu nhập của gia đình hàng tháng" readonly @click="openPicker('family')" v-model="data.family" />
		    </div>
		</div>
		<div class="topup" @click="sub">Cấu hình</div>

		<Picker v-if="picker_loading" v-model:isShowPicker="isShowPicker" v-model:anchor="anchor" :data="picker_data"
			:options="options" @confirm="confirmSelection" />
	</div>
</template>

<script>
	import { Picker } from 'vue3-picker';
	import AJAX from '@/utils/http'
	export default {
		components: {
			Picker,
		},

		data() {
			return {
				picker_loading: false,
				isShowPicker: false,
				anchor: 0,
				options: {
					titleText: 'Vui lòng chọn',
					cancelColor: '#999',
					confirmColor: '#1766ff',
				},
				picker_list:{},
				picker_data: [],
				pickerType: "",
				data: {},
			};
		},
		mounted() {
			this.picker_loading = true;
		},
		created() {
			this.fetchData();
		},
		methods: {
			sub(){
				if(this.data.job_type == '' || this.data.job_type == undefined){
					this.$toast('Vui lòng chọn công việc của bạn');
					return;
				}
				else if(this.data.working_years == '' || this.data.working_years == undefined){
					this.$toast('Vui lòng chọn giờ làm việc của bạn.');
					return;
				}
				else if(this.data.personal == '' || this.data.personal == undefined){
					this.$toast('Nhập thu nhập hàng tháng của bạn');
					return;
				}
				else if(this.data.family == '' || this.data.family == undefined){
					this.$toast('Nhập thu nhập hàng tháng của gia đình bạn');
					return;
				}
				else {
					AJAX.post('/user/work/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
							return;
						}
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						       this.$router.go(-1);
						     }
						});
						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/');
						// });
					});
				}
			},
			fetchData() {
				AJAX.post('/user/work', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}
					this.picker_list = e.data.picker_list;
				});
			},
			openPicker(type) {
				this.pickerType = type;
				this.picker_data = this.picker_list[type];
				this.isShowPicker = true;
			},
			confirmSelection(value) {
				if (this.isShowPicker && value) {
					this.data[this.pickerType] = value;
					this.isShowPicker = false;
				}
			},
			cancelSelection() {
				this.isShowPicker = false;
			},
		}
	};
</script>

<style scoped>
	.personal{
		padding-left: 16px;
		padding-right: 16px;
	}
</style>
